<template>
    <div class="common-layout">
        <el-container>
            <el-header class="head">内卷221-（MES）-生产执行管理系统</el-header>
            <el-container>
                <el-aside class="aside">
                    <!-- 系统菜单 -->
                    <el-scrollbar>
                        <el-menu >
                            <el-sub-menu  index="1">
                                <template #title>
                                    <el-icon><Histogram /></el-icon>系统管理
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item @click="menuClick" index="dict">字典管理</el-menu-item>
                                    <el-menu-item @click="menuClick" index="log">日志管理</el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                            <el-sub-menu index="2">
                                <template #title>
                                    <el-icon><Operation /></el-icon>主数据管理
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item @click="menuClick" index="item">物料产品管理</el-menu-item>
                                    <el-menu-item @click="menuClick" index="item-cat">物料产品分类</el-menu-item>
                                    <el-menu-item @click="menuClick" index="unit">计量单位</el-menu-item>
                                    <el-menu-item @click="menuClick" index="client">客户管理</el-menu-item>
                                    <el-menu-item @click="menuClick" index="vendor">供应商管理</el-menu-item>
                                    <el-menu-item @click="menuClick" index="workshop">车间设置</el-menu-item>
                                    <el-menu-item @click="menuClick" index="workstation">工作站</el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                            <!-- 其他的菜单可以按需添加 -->
                            <el-sub-menu  index="3">
                                <template #title>
                                    <el-icon><Histogram /></el-icon>质量管理
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item @click="menuClick" index="defect">常见缺陷</el-menu-item>
                                    <el-menu-item @click="menuClick" index="index">检测项管理</el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                            <el-sub-menu index="4">
                                <template #title>
                                    <el-icon><Operation /></el-icon>生产管理
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item @click="menuClick" index="workorder">生产工单</el-menu-item>
                                    <el-menu-item @click="menuClick" index="process">工序设置</el-menu-item>
                                    <el-menu-item @click="menuClick" index="route">工艺流程</el-menu-item>
                                    <el-menu-item @click="menuClick" index="produceornot">生产排产</el-menu-item>
                                    <el-menu-item @click="menuClick" index="report">生产报工</el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                            <el-sub-menu index="5">
                                <template #title>
                                    <el-icon><Operation /></el-icon>排班管理
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item @click="menuClick" index="calTeam">班组设置</el-menu-item>
                                    <el-menu-item @click="menuClick" index="calTeamPlan">排班设置</el-menu-item>
                                    <el-menu-item @click="menuClick" index="111">节假日设置</el-menu-item>
                                    <el-menu-item @click="menuClick" index="111">排班日历</el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                        </el-menu>
                    </el-scrollbar>
                </el-aside>
                <el-main class="main">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
export default {
    data() {
        return {

        }
    },methods:{
        /**
         * 菜单条目的单机事件
         * @param {*} menuItem 菜单条目对象 
         */
        menuClick(menuItem){
            // 获取菜单的路由
            let path = menuItem.index;
            // 设置路由
            this.$router.push(path);
        }
    }
}
</script>
<style scoped>
.head {
    background-color: #d9ecff;
}
.aside{
    width: 20%;
}
.main{
    width: 80%;
}
</style>